<!--团员加入团队-->
<template>
	<view class="noJoinTeam">
		<uni-top fixed="true" statusBar="true" class="top" border="" background-color="#585cf7" color="#fff" left-text="团队" rightText="自组团队"></uni-top>
		<view class="team_wrap">
			<view class="team_name">
				<view class="top">
					<view class="left">
						<text class="title">团队名称</text>
					</view>
					<view class="right">
						<text v-if="teamIntro.exit" class="open_join" @click="withdrawal(false)" style="color: red;">取消申请退出</text>
						<text v-else class="open_join" @click="withdrawal(true)">申请退出</text>
						
					</view>
				</view>
				<view class="name_wrap">
					<view class="name">{{teamIntro.teamName}}</view>
					<view class="sub_name">{{teamIntro.brief}}</view>
				</view>
				<view class="bonus_wrap">
					<view class="time_select">
						 <picker :end="nowTime" mode="date" fields="month" @change="handleDate">
							<view class="time_month">{{ time }}<text class="triangle-down"></text></view>
						 </picker>
					</view>
					<view class="bonus">
						<view class="left">
							<view>￥<text class="money">{{performance}}</text>万</view>
							<view class="tip_name">计入业绩</view>
						</view>
						<view class="right">
							<view>￥<text class="money">{{bonus}}</text></view>
							<view class="tip_name">预估奖金</view>
						</view>
					</view>
					<view class="bottom_tips">奖金分配规则：合伙人占比20%，经纪人占比80%</view>
				</view>
			</view>
			<!--end team_name-->
		</view>
		<!--end team_wrap-->
		<view class="rank_wrap">
			<view class="img_wrap">
				<image class="user_img" mode="aspectFit" :src="rankNum.icon"></image>
			</view>
			<view class="center">
				我当前在团队中的排名
			</view>
			<view class="right">
				第<text class="bold">{{rankNum.rank}}</text>位/共{{rankNum.totalNum}}位
			</view>
		</view>
		<!--- end rank_wrap-->
		<view class="notice">
			<view class="top">
				<view class="left">
					<text class="info uniicons">&#xe504;</text>
					<text class="title">团队公告</text>
				</view>
			</view>
			<view class="bottom">
				{{notice}}
			</view>
		</view>
		<!--end notice-->
		<view class="team_bonus">
			<view class="top">
				<text class="title">额外奖金</text>
				<text class="text">了解团队创建或加入规则？</text>
			</view>
			<view class="bonus_wrap">
				<view class="update_wrap" v-if="level ==3">
					<view class="title">您的当前等级为S3</view>
					<view class="tips">可以组建自已的团队冲刺额外奖金啦！</view>
					<view class="btn_wrap">
						<wyb-button class="btn" :ripple="true" type="plain" color="#585cf7"
						:radius="radius" width="230rpx" height="68rpx" font-size="24rpx"
							>暂不组建</wyb-button> 
						<wyb-button class="btn" :ripple="true" type="plain" color="#585cf7"
						:radius="radius"  width="230rpx" height="68rpx"  font-size="24rpx"
							>退团并组建</wyb-button> 
					</view>
				</view>
				<view class="bonus_tips">奖金分配规则：合伙人占比20%，经纪人占比80%</view>
				<view class="bouns_list">
					<view class="title">业绩奖金</view>
					<view class="list_item" v-for="(item, index) in list" :key="index">
						<view class="left">
							<view class="time">{{item.incomeDate}}</view>
							<view class="sub_title">进件{{item.orderCount}}，业绩{{item.totalCloseAmount}}</view>
						</view>
						<view class="right">
							￥<text class="money">{{item.estimateBonus}}</text><text class="uniicons">&#xe583;</text>
						</view>
					</view>
					<uni-load-more :status="status" v-if="pages > 1"/>
				</view>
			</view>
		</view>
		
		<wyb-modal
			 ref="modal"
			 title="申请退出"
			 :content="modCon"
			 cancel-text="取消"
			 confirm-text="确定"
			 cancel-color="#ff4c29"
			 confirmColor="#585cf7"
			 :async-close="true"
			 :mask-click-close="true"
			 @cancel="onCancelClick"
			 @confirm="onConfirmClick">
		</wyb-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selDate: "2020-12",
				radius:["100px"],
				teamIntro:{},
				notice: null,
				level:null,
				status: "more",
				list: [],
				pages: 0,
				pageNo: 0,
				time: "",
				nowTime: "",
				performance: 0,
				bonus: 0,
				rank: 0,
				totlRank: 0,
				modSta: false,
				modCon: null,
				rankNum:{},//排名
			}
		},
		created() {
			// this.start();
		},
		onReachBottom: function() {
			let that = this;
			let pageNo = this.pageNo +1;
			let queryData = {};
			if(pageNum <= this.pageSize){
				queryData.pageNo = pageNum;
				that.getMoreData(queryData)
			}else{
				that.status = "noMore"
			}
		},
		methods: {
			//申请退出
			withdrawal(status) {
				this.modSta = status
				if(status){
					this.modCon = "申请退出此团队"
				}else{
					this.modCon = "取消申请退出此团队"
				}
				this.$refs.modal.showModal()
			},
			onConfirmClick() {
				if(this.modSta){
					this.$api.teamExit().then(res=> {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						this.teamIntro.exit = true;
						this.$emit('refresh');
					})
				}else{
					this.$api.teamExit().then(res=> {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						this.teamIntro.exit = false;
					})
				}
				
			},
			onCancelClick() {
				uni.showToast({
					title: "操作取消",
					icon: 'none'
				})
			},
			//页面加载函数
			start(){
				this.getTeamIntro();
				this.getTeamNotice();
				this.getTeamMemGrande();
				this.getTeamMemOrder();
				this.getTeamMemRank();
				//获取当前时间
				let timestamp = Date.parse(new Date());
				let date = new Date(timestamp);
				//获取年份  
				let Y = date.getFullYear();
				//获取月份  
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var time = Y + "-" + M
				this.time = time;
				this.nowTime = time;
				this.getTeamMemGross({date: time});
			},
			//获取团队概述名称,介绍
			getTeamIntro() {
				this.$api.getTeamIntro().then(res=> {
					this.teamIntro = res.data.data;
				})
			},
			//获取团队公告
			getTeamNotice() {
				this.$api.getTeamNotice().then(res => {
					this.notice = res.data.data;
				})
			},
			//获取团队等级
			getTeamMemGrande() {
				this.$api.getTeamMemGrande().then(res => {
					this.level= res.data.data;;
				})
			},
			//经纪人已加入:展示个人在团队中的排名
			getTeamMemRank() {
				this.$api.getTeamMemRank().then(res => {
					// this.rank= res.data.data.rank;
					// this.totlRank= res.data.data.totalNum;
					this.rankNum=res.data.data;
					
				})
			},
			handleDate(e) {
			    let time = e.detail.value;
			    this.time = time;
				this.getTeamMemGross({date: time});
			},
			//团队奖金,团队业绩
			getTeamMemGross(obj){
				this.$api.getTeamMemGross(obj).then(res=> {
					let resData = res.data.data;
					this.bonus = resData.bonus;
					this.performance = resData.performance;
				})
			},
			//团队人员的个人订单收入信息
			getTeamMemOrder(obj) {
				this.$api.getTeamMemOrder(obj || {}).then(res => {
					let resData = res.data.data;
					this.pages = resData.pages;
					this.pageNo = resData.current;
					this.list = resData.records;
				})
			},
			//获取更多数据
			getMoreData(queryData){
				this.$api.getTeamMemOrder(queryData).then(res => {
					let data = res.data.data.records;
					if(data){
						this.list = this.list.concat(data);
						this.pages = res.data.data.pages;
						this.pageNo = res.data.data.current;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.team_wrap{
	padding: 20rpx 30rpx 0 ; background: linear-gradient(to bottom, #585cf7 0%,#585cf7 35%,#f8f8f8 36%,#f8f8f8 100%); margin-bottom: 20rpx;
	.team_name{padding: 20rpx 30rpx ; background: white;border-radius: 20rpx;
		 .top{display: flex;justify-content: space-between;align-items: center;}
		 .title{font-size: 28rpx;font-weight: bold;color: #333333;}
		 .open_join{font-size: 26rpx;color: #585cf7;}
		 .name_wrap{padding: 0 48rpx; text-align: center;position: relative; margin: 20rpx 0;
			.name{text-align: center;font-size: 32rpx;font-weight: bold;color: #333333;}
			.sub_name{font-size: 24rpx;color: #999999;line-height: 40rpx;text-align: center;}
		 }
		 .bonus_wrap{background: #F8F8F8;border-radius:10px;overflow: hidden;
			.time_month{position: relative;font-size: 22rpx;color: #999999;height: 66rpx;line-height: 66rpx; padding: 0 20rpx;}
			.triangle-down{position: absolute; top:calc(50% - 6rpx);left: 130rpx;}
			.bonus{padding: 0 30rpx 20rpx;display: flex;justify-content: space-around;align-items: center;}
			.left,.right{text-align: center;}
			.money{font-size: 44rpx;font-weight: bold;color: #333333;}
			.tip_name{font-size: 26rpx;color: #999999;}
			.bottom_tips{background: #F8E9E9;font-size: 22rpx;color: #F96363;text-align: center;line-height: 50rpx;}
		 }
	}
}
.rank_wrap{
	padding: 20rpx 30rpx ; background: #FAF1E0; margin: 0 30rpx 20rpx ;border-radius: 20rpx;
	display: flex;justify-content:space-between;align-items: center;
	.img_wrap{width: 50rpx; height: 50rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;}
	.user_img{width: 50rpx; height: 50rpx;} 
	.center{flex: 1; font-size: 24rpx; color:#333333}
	.right{font-size: 24rpx; color:#FF8A00}
	.bold{font-size: 32rpx;}
}
.notice{ padding: 20rpx 30rpx ; background: white; margin: 0 30rpx 20rpx ;border-radius: 20rpx;
	.top{display: flex;justify-content: flex-start;align-items: center;}
	.title{font-size: 28rpx;font-weight: bold;color: #333333;}
	.info{color: #585cf7; font-size: 40rpx;margin-right: 10rpx;}
	.edit{color: #999999; font-size: 40rpx;}
	.bottom{ margin: 20rpx 0 ;font-size: 26rpx;}
}
.team_bonus{ margin: 0 30rpx 40rpx;
	.top{display: flex;justify-content: space-between;align-items: center;height: 68rpx;
		.title{font-size: 32rpx;color: #333333;}
		.text{font-size: 22rpx;font-weight: 500;color: #585cf7;}
	}
	.bonus_wrap{background: #FFFFFF;border-radius: 20rpx; padding: 40rpx 30rpx;
		.update_wrap{border: 1px solid #CCCCCC;border-radius: 20rpx; padding: 40rpx 30rpx;margin-bottom: 30rpx;
			.title{font-size: 32rpx;font-weight: bold;color: #333333; text-align: center;}
			.tips{font-size: 24rpx;color: #999999;text-align: center; margin-top: 12rpx;}
			.btn_wrap{display: flex;justify-content: space-between;align-items: center; margin-top: 24rpx;}
		}
	}
	.bonus_tips{height: 50rpx;background: #F8E9E9;line-height: 50rpx;font-size: 24rpx;color: #F96363;text-align: center;}
	.bouns_list{ margin-top: 30rpx;padding-top: 10rpx;
		.title{font-size: 30rpx;font-weight: bold;color: #333333; margin-bottom: 20rpx;}
		.list_item{padding: 20rpx 0; display:flex;justify-content: space-between;align-items: center;border-bottom: 2rpx solid#EEEEEE ;}
		.time{font-size: 32rpx;color: #333333;}
		.sub_title{font-size: 24rpx;color: #999999;}
		.right{line-height: 32rpx;}
		.money{font-size: 38rpx;font-weight: bold; font-family: unidin;}
		.uniicons{font-size: 32rpx;vertical-align: top;}
	}
}
</style>
